<template>
    <template v-for="item in props.menuData">
        <!-- 没有子菜单 -->
        <el-menu-item 
            v-if="!item.children || item.children.length === 0" 
            :index="`${props.index}-${item.meta.id}`"
            :key="`${props.index}-${item.meta.id}-item`"
            @click="handleClick(item, `${props.index}-${item.meta.id}`)"
        >
            <el-icon size="20">
                <!-- 动态组件 -->
                <component :is="item.meta.icon" />
            </el-icon>
            <span>{{ item.meta.name }}</span>
        </el-menu-item>
        <!-- 有子菜单 -->
        <el-sub-menu 
            v-else 
            :index="`${props.index}-${item.meta.id}`"
            :key="`${props.index}-${item.meta.id}-menu`" 
        >
            <!-- 菜单名称 -->
            <template #title>
                <el-icon size="20">
                    <component :is="item.meta.icon" />
                </el-icon>
                <span>{{ item.meta.name }}</span>
            </template>
            <!-- 递归调用 -->
            <tree-menu :index="`${props.index}-${item.meta.id}`" :menuData="item.children"></tree-menu>
        </el-sub-menu>
    </template>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useMenuStore } from '../store/menu'
const router = useRouter()
const menuStore = useMenuStore()
/*  接收父组件传递过来的菜单数据
 *  为什么要从父组件里面传递菜单数据，而不是自己使用router，直接获取要渲染的菜单项呢？
 *  1、如果直接在TreeMenu组件中使用router获取菜单数据，会使该组件与路由系统紧密耦合
 *  2、通过props传递数据，TreeMenu组件可以成为一个纯粹的展示组件，可以在任何需要树形菜单的地方使用，而不必依赖路由配置
 */
const props =  defineProps(['menuData', 'index'])
// 路由跳转 + 添加tag
const handleClick = (item, index) => {
    // 添加tag
    menuStore.addMenu(item)
    menuStore.updateMenuActive(index)
    router.push(item.meta.path)
}
</script>

<style lang="less" scoped>

</style>